<template>
    <div class="common-layout">
        <el-container>
            <el-container>
                <el-header class="no-flex" height="auto">
                    <el-button type="primary" icon="plus" @click="addOrUpdateUser">新增</el-button>
                    <el-button type="primary" @click="delAll" icon="delete">删除</el-button>
                </el-header>
                <el-main class="nopadding">
                    <el-table 
                        :data="userList" 
                        height="auto" 
                        border
                        @selection-change="handleSelectionChange"
                        paginationLayout="total, prev, pager, next"
                    >
                        <el-table-column align="center" type="selection" />
                        <el-table-column label="用户姓名" prop="username" align="center" />
                        <el-table-column label="真实姓名" prop="realName" align="center" />
                        <el-table-column label="用户类型" prop="userType" width="100px">
                            <template #default="{ row }">
                                <div v-if="row.userType == 0">普通账号</div>
                                <div v-if="row.userType == 1">超级管理员</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机号码" prop="phone" width="150" />
                        <el-table-column label="用户性别" prop="gender" align="center">
                            <template #default="{ row }">
                                <template v-for="item in dicts.system_global_gender">
                                    <div v-if="row.gender == item.v">{{ item.k }}</div>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column label="账号状态" prop="enabled" align="center">
                            <template #default="{ row }">
                                <template v-for="item in dicts.system_global_status">
                                    <el-tag v-if="row.enabled == item.v">{{ item.k }}</el-tag>
                                </template>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center" width="180" fixed="right">
                            <template #default="{ row }">
                                <div class="sys-table-main-actions">
                                    <el-link icon="edit" v-if="!row.userType == 1" type="primary"
                                        :underline="false" @click="addOrUpdateUser(row)"> 修改</el-link>

                                    <el-link icon="delete" v-if="!row.userType == 1" style="margin-left: 10px"
                                        type="danger" :underline="false" @click="del(row)">删除</el-link>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>

                <!-- 底部分页 -->
                <el-footer style="display: flex;justify-content: flex-end;">
                    <pagination 
                        :pages="pages"
                        @changeSize="handleSizeChange"
                        @changeCurrent="handleCurrentChange"
                    />
                </el-footer>

            </el-container>
        </el-container>

        <!--dialog-->
        <userDialog v-if="dialog.show" v-model:show="dialog.show" @change="getUserData" :updateRow="updateRow"></userDialog>
    </div>
</template>

<script setup name="用户管理">
import {ref,onBeforeMount,getCurrentInstance, reactive } from 'vue'

// 新增&修改 dialog
import userDialog from '@views/system/user/userDialog.vue'
const { proxy } = getCurrentInstance()

//api
import {userPage,userDelete} from './api'
import { ElMessage } from 'element-plus'

//分页组件
import pagination from '@components/pagination/pagination.vue'
//分页数据
const pages = reactive({
    current:1,//当前页
    size:10,//分页大小
    total:0 //总条数
})
//每一页显示多少条数据
const handleSizeChange = async ( val )=>{
    pages.size = val
    await getUserData();
}
//点击页码
const handleCurrentChange = async ( val )=>{
  pages.current = val
  await getUserData();
}


// table数据
const userList = ref([])
//生命周期
onBeforeMount(async ()=>{
    // 混入字典
    proxy.sendDicts(['system_global_status'])
    // 获取用户列表
    await getUserData()
    
})
// 获取用户列表
const getUserData = async ()=>{
    let res = await userPage({
        current:pages.current,
        size:pages.size
    })
    pages.total = res.data.total

    userList.value = res.data.records
}

//dialog控制
const dialog = reactive({
    show:false
})

// 新增 && 修改
let updateRow = ref('');
const addOrUpdateUser = (row)=>{
    if(row){
        updateRow.value = row.id
    }
    if(dialog.show) return
    dialog.show = true
}

// 删除
const del = async (row)=>{
    let res = await userDelete(row.id)
    if(res.code=="200") {
        getUserData()
        return ElMessage({type:'success',message:"删除成功"})
    }
}

//选中的元素
const multipleSelection = ref([])
//批量选中
const handleSelectionChange = (val)=>{
  multipleSelection.value = val
}
// 批量删除
const delAll = ()=>{
  Promise.all(multipleSelection.value.map(item=>userDelete(item.id))).then(async res=>{
    await getUserData()
  })
}
</script>

<style scoped></style>